<template>
    <div class="com-container">
        <div class="com-chart" ref="ref_hotproduct"></div>
        <span class="iconfont icon-arrow-lift left-icon" @click="toLeft" :style="comFontSize"></span>
        <span class="iconfont icon-arrow-right right-icon" @click="toRight" :style="comFontSize"></span>
        <span class="cat-title" :style="comFontSize">{{ catTitle }}</span>
    </div>
</template>
<script>
export default {
    name:'hotproduct',
    data(){
        return{
            chartInstance:null, //初始化echarts的对象
            allData:null,//服务器请求回来的数据
            currentId:0, //allData数组下标
            titleFontSize:null
        }
    },
    created(){
        this.$socket.registerCallBack('hotData',this.getData);
    },
    computed:{
        catTitle(){
            if(!this.allData){
                return '';
            }else{
                return this.allData[this.currentId].name;
            }
        },
        //计算字体的大小
        comFontSize(){
            return {
                fontSize:this.titleFontSize + 'px'
            }
        }
    },
    mounted(){
        this.initChart();
        // this.getData();
        this.$socket.send({
            action:'getData',
            socketType:'hotData',
            chartName:'hotproduct',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    // 组件销毁
    destroyed(){
        // 移出window.addEventListener('resize',this.updateAdapter);
        window.removeEventListener('resize',this.updateAdapter);
        // 注销回调函数
        this.$socket.unRegisterCallBack('hotData');
    },
    methods:{
        // 定义初始化图表的方法initChart()
        async initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.ref_hotproduct,'chalk');
            // 请求数据库数据
            const initOption = {
                // 配置title
                title:{
                    text:'▎热销商品的占比',
                    top:20,
                    left:20
                },
                // 配置legend
                legend:{
                    top:'15%',
                    icon:'circle'
                },
                // tooltip
                tooltip:{
                    show:true,
                    formatter: args =>{
                        const thirdCategory = args.data.children;
                        // 计算三级分类的数值总和
                        let total = 0;
                        thirdCategory.forEach(item => {
                            total += item.value
                        })
                        let setStr ='';
                        thirdCategory.forEach( item =>{
                            setStr += `${ item.name }:${parseInt(item.value / total * 100) + '%' }<br />`
                        })
                        return setStr;
                    }
                },
                series:[
                    {
                        type:'pie',
                        label:{
                            show:false
                        },
                        // 配置高亮
                        emphasis:{
                            label:{
                                show:true
                            },
                            // label线
                            labelLine:{
                                show:false
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption);
        },
        // 获取数据
       getData(ret){
            // const { data:ret } = await this.$http('hotproduct');
            this.allData = ret;
            // console.log('hot',ret)
            this.updateChart();
        },
        // 更新图表方法updateChart()
        updateChart(){
            // 设置legendArr数据
            const legendArr = this.allData[this.currentId].children.map( item => item.name );
            // 设置seriesArr数据
            const seriesArr = this.allData[this.currentId].children.map(item => {
                return {
                    name:item.name,
                    value:item.value,
                    children:item.children
                }
            })
            // 数据配置项
            const dataOption = {
               legend:{
                   data:legendArr
               },
               series:[
                   {
                       data:seriesArr
                   }
               ]
            }
            this.chartInstance.setOption(dataOption)
        },
        // 实现屏幕适配
        /*
            1.监听窗口的大小的变化
            2.设置适配想数据
            3.调用echarts.resize()方法
        */
       screenAdapter(){
           this.titleFontSize = this.$refs.ref_hotproduct.offsetWidth / 100 * 3.6;
           const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:this.titleFontSize
                    }
                },
                legend:{
                    itemWidth:this.titleFontSize,
                    itemHeight:this.titleFontSize,
                    itemGap:this.titleFontSize,
                    textStyle:{
                        fontSize:this.titleFontSize / 2
                    }
                },
                series:[
                    {
                        radius:this.titleFontSize * 4,
                        center:['50%','60%']
                    }
                ]
           }
            //设置数据
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
       },
       //toLeft
       toLeft(){
           this.currentId--;
           if(this.currentId < 0){
               this.currentId = this.allData.length - 1;
           }
           this.updateChart();
       },
       //toRight
       toRight(){
           this.currentId++;
           if(this.currentId > this.allData.length - 1){
               this.currentId = 0
           }
           this.updateChart();
       },
    }
}
</script>
<style lang="less" scoped>
.left-icon{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #fff;
}
.right-icon{
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #fff;
}
.cat-title{
    position: absolute;
    bottom: 5%;
    right: 20%;
    color: #fff;
}
</style>